// 样式-数据-开启聚合
import React from 'react';
import { Switch } from 'antd';
import FormItem from 'antd/lib/form/FormItem';
import { COMPLEX_CODE } from './EnumConfig';
import { debounce } from 'src/libs/utils';

interface IProps {
	config: any;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	form: any;
}

const OpenAggregation = ( props: IProps ) => {
	const { config, onValuesChange } = props;

	const { tableType, openAggregation } = config.data;

	const onSwitchChange = ( checked, name ) => {
		// form.setFieldsValue( { [name]: checked } );
		onValuesChange( config.type, config.key, { [name]: checked }, 'data' );
	};

	return (
		<>
			{tableType !== COMPLEX_CODE && (
				<FormItem label="" name="openAggregation">
					<LabelSwitch
						name="openAggregation"
						onChange={onSwitchChange}
						label="是否聚合"
						checked={openAggregation}
					></LabelSwitch>
				</FormItem>
			)}
		</>
	);
};

const LabelSwitch = ( props: any ) => {
	const { label, onChange, name, checked } = props;
	return (
		<div
			style={{
				display: 'flex',
				alignItems: 'center',
				justifyContent: 'space-between',
			}}
		>
			<label>{label}</label>
			<Switch
			    checked={checked}
				onChange={debounce( ( value ) => onChange( value, name ), 500 )}
			></Switch>
		</div>
	);
};

export default React.memo( OpenAggregation );
